<template>
	<view>
		<!-- 判断是否正在加载数据 -->
		<view v-if="isLoading" class="loading-container">
			<text>加载中...</text>
		</view>
		<!-- 判断是否有车辆信息 -->
		<view v-else-if="vehicleList.length > 0">
			<!-- 显示车辆信息 -->
			<view class="vehicle-item" v-for="(vehicle, index) in vehicleList" :key="index">
				<!-- 车辆图片 -->
				<image :src="vehicle.imageUrl" class="vehicle-image" mode="aspectFit" />
				<!-- 车辆信息 -->
				<view class="vehicle-info">
					<view class="vehicle-type">车型：{{ vehicle.type }} {{ vehicle.model }}</view>
					<view class="vehicle-number">车牌：{{ vehicle.number }}</view>
					<!-- 单选框 -->
					<radio :checked="number == vehicle.number" @tap="setDefault(index)" style="padding-top: 10rpx;">设为默认
					</radio>
				</view>
				<!-- 操作按钮 -->
				<view class="vehicle-actions">
					<view class="action-button delete-button" @tap="deleteVehicle(index)" style="font-size: 18px;">删除
					</view>
				</view>
			</view>
		</view>
		<!-- 如果没有车辆信息 -->
		<view v-else class="noneVehicles">
			<image src="/static/logo.png" mode="aspectFit" style="width: 200rpx; height: 200rpx;"></image>
			<text style="font-size: 30rpx; font-weight: bold; margin-top: 10rpx;">
				暂无车辆信息
			</text>
		</view>

		<!-- 添加爱车按钮 -->
		<button class="add-button" @tap="toAdd">添加爱车</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import carApi from '../../../api/carApi';

	// 默认车辆的车牌号
	let number = ref("");
	// 定义车辆列表数据
	let vehicleList = ref([]);
	// 定义一个变量来表示是否正在加载数据
	let isLoading = ref(true);

	// 设置默认车辆
	const setDefault = (index) => {
		//进行判断是否点击相同的
		if (number.value == vehicleList.value[index].number) {
			number.value = "";
			return;
		}
		//更新前端的默认车辆
		number.value = vehicleList.value[index].number;
		//更新数据库的默认车辆
		carApi.setCarUuidByUsername.call({
				username: 'ry',
				carUuid: vehicleList.value[index].uuid
			})
			.then(res => {
				if (res == "success") {
					uni.showToast({
						title: "已设为默认车辆",
						icon: "none"
					});
				}
			})
			.catch(err => {
				uni.showToast({
					title: "请求失败",
					icon: "none"
				});
			})

	};

	// 获取默认车辆
	const getDefault = () => {
		carApi.getCarUuidByUsername.call({
				username: 'ry'
			})
			.then(res => {
				// console.log(res);
				// 如果车辆列表为空，直接返回
				if (vehicleList.value.length === 0) {
					return;
				}
				//如果获取的没有默认车辆或者默认车辆不存在,默认第一辆车牌号
				if (!res.uuid || !vehicleList.value.find(item => item.uuid == res.uuid)) {
					number.value = vehicleList.value[0].number
					carApi.setCarUuidByUsername.call({
						username: 'ry',
						carUuid: vehicleList.value[0].uuid
					})
					// console.log(number.value);
					return;
				}
				number.value = vehicleList.value.find(item => item.uuid == res.uuid)?.number;
				console.log(number.value);
			})
			.catch(err => {
				uni.showToast({
					title: "请求失败",
					icon: "none"
				});
			})
	}

	// 删除车辆
	const deleteVehicle = (index) => {
		// 弹出确认框
		uni.showModal({
			title: '确认删除',
			content: '你确定要删除这辆车吗？',
			confirmText: '确定',
			cancelText: '取消',
			success: (res) => {
				if (res.confirm) {
					// 调用删除的接口
					carApi.deleteCarInfo.call(vehicleList.value[index].uuid)
						.then(res => {
							// console.log(res);
							uni.showToast({
								title: "删除成功",
								icon: "none"
							});
							//删除对应的列表的行
							vehicleList.value.splice(index, 1);
						})
						.catch(err => {
							// console.log(err);
							uni.showToast({
								title: "请求失败",
								icon: "none"
							});
						})
				}
			}
		});
	};

	// 跳转到添加车辆页面
	const toAdd = () => {
		uni.redirectTo({
			url: "/packageMy/vehicle/addVehicle/addVehicle"
		});
	};

	// 获取车辆列表
	const getVehicleList = () => {
		carApi.getCarInfoByUserName.call({
				username: "ry"
			})
			.then((res) => {
				vehicleList.value = res.map(item => {
					var vehicle = {
						imageUrl: item.images,
						type: item.carType,
						// model: item.uuid,
						number: item.carNum,
						uuid: item.uuid
					}
					return vehicle
				})
				if(vehicleList.value.length > 0) {
					getDefault();
				}
				// console.log(res);
				// 数据获取完成，将isLoading设置为false
				isLoading.value = false;
			})
			.catch(err => {
				console.log(err);
				uni.showToast({
					title: '获取车辆信息失败',
					icon: 'none'
				});
				// 数据获取失败，也将isLoading设置为false
				isLoading.value = false;
			})
	}

	// 初始化
	onMounted(async () => {
		// 获取当前用户的车辆
		await getVehicleList();
		// await getDefault();
	});
</script>

<style scoped>
	/* 车辆信息条目样式 */
	.vehicle-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 车辆图片样式 */
	.vehicle-image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	/* 车辆信息样式 */
	.vehicle-info {
		flex: 1;
	}

	.vehicle-type {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.vehicle-number {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-top: 10rpx;
	}

	/* 操作按钮样式 */
	.vehicle-actions {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.action-button {
		/* background-color: #1D6FFF; */
		color: #ff4d4d;
		font-size: 24rpx;
		font-weight: bold;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		width: 120rpx;
		text-align: center;
	}

	.delete-button {
		/* background-color: #ff4d4d; */
	}

	/* 添加爱车按钮样式 */
	.add-button {
		background-color: #1D6FFF;
		width: 90%;
		color: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
		position: fixed;
		bottom: 40rpx;
		left: 5%;
	}

	/* 暂无车辆信息样式 */
	.noneVehicles {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}

	/* 加载中样式 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}
</style>